<template>
<div class="house-list">
  <a-table
    rowKey="id"
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :scroll="{ x: true }"
  >
    <template slot="photo" slot-scope="url">
      <img class="row-photo" :src="url" />
    </template>
    <template slot="name" slot-scope="name,item">
      <div>{{name}}</div>
      <div>{{item.intro}}</div>
      <div>{{item.nature}}</div>
    </template>
    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
    <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <span slot="action" slot-scope="text, record">
      <a @click="open(record)">详情</a>
      <a-divider type="vertical" />
      <a @click="open(record)">写跟进</a>
      <a-divider type="vertical" />
      <a class="ant-dropdown-link" @click="open(record)">约看<a-icon type="down" /> </a>
    </span>
  </a-table>
  <EditPanel ref="EditPanel" />
</div>
</template>
<script>
import tableColumns from './tableColumns'
import EditPanel from './EditPanel'

export default {
  components: {
    EditPanel
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      columns: tableColumns,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showLessItems: true,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `总共 ${total} 条`,
        size: 'small',
        total: 0
      }
    }
  },
  methods: {
    open (item) {
      this.$refs.EditPanel.showDrawer(item)
    }
  }
}
</script>

<style lang="less">
.house-list{
  .row-photo{
    width: 60px;
  }
  .ant-table{
    background-color: #fff;
  }
  // .ant-table td { white-space: nowrap; }
}
</style>
